import styles from './index.less'
import logo from '../assets/images/logo.png'
import { Form, Input, Button, Checkbox } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'

export default function IndexPage() {
  const onFinish = (values: any) => {
    console.log(values)
  }
  return (
    <div className={styles['form__wrap']}>
      <img src={logo} />
      <Form onFinish={onFinish}>
        <Form.Item
          name="username"
          rules={[
            {
              required: true,
              message: '请输入用户名!'
            }
          ]}
        >
          <Input prefix={<UserOutlined />} placeholder="用户名" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: '请输入密码!'
            }
          ]}
        >
          <Input prefix={<LockOutlined />} type="password" placeholder="密码" />
        </Form.Item>
        <Form.Item name="remember" valuePropName="checked">
          <Checkbox>记住密码</Checkbox>
        </Form.Item>
        <Form.Item className={styles['form__login']}>
          <Button type="primary" htmlType="submit">
            登录
          </Button>
          <Button type="primary">注册</Button>
        </Form.Item>
      </Form>
    </div>
  )
}
